<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/bs.css" />
    <style>
      .table img {
        width: 15rem;
      }
    </style>
  </head>
  <body>
    <div style="margin-left: 100px">
      <div class="col-md-3">
        <label for="username" class="form-label">用户名</label>
        <input type="text" class="form-control" id="username" />
      </div>
      <div class="col-md-3">
        <label for="avatar" class="form-label">头像</label>
        <input type="file" class="form-control" id="avatar" />
        <!-- <img src="../02. FileAPI/assets/link.jpg" class="img-thumbnail" /> -->
      </div>
      <button type="button" class="btn btn-primary add-user">添加用户</button>
      <button type="button" class="btn btn-success get-user">
        查询所有用户
      </button>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">用户名</th>
            <th scope="col">头像</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td>Mark</td>
            <td>
              <img src="" alt="" />
            </td>
          </tr> -->
        </tbody>
      </table>
    </div>
    <script>
      const username = document.querySelector("#username");
      const avatar = document.querySelector("#avatar");
      const addUserBtn = document.querySelector(".add-user");
      const getUserBtn = document.querySelector(".get-user");
      const tbody = document.querySelector("tbody");

      const request = indexedDB.open("USER", 3);
      request.onupgradeneeded = function (e) {
        const db = e.target.result;
        if (!db.objectStoreNames.contains("user")) {
          db.createObjectStore("user");
        }
      };
      request.onsuccess = function (e) {
        const db = e.target.result;
        addUserBtn.onclick = function () {
          if (username.value && avatar.files.length === 1) {
            const user = {
              name: username.value,
              avatar: avatar.files[0],
            };
            const transaction = db.transaction("user", "readwrite");
            const store = transaction.objectStore("user");
            const r = store.add(user, user.name);
            r.onsuccess = function () {
              console.log("添加成功");
              username.value = null;
              avatar.value = null;
            };
          }
        };
        getUserBtn.onclick = function () {
          const transaction = db.transaction("user");
          const store = transaction.objectStore("user");
          const r = store.getAll();
          r.onsuccess = function (e) {
            // console.log(e.target.result);
            // 进行页面渲染
            const list = e.target.result;
            if(list !== null) {
              list.forEach(({name, avatar}) => {
                const tr = document.createElement('tr');
                tbody.appendChild(tr);
                tr.innerHTML = `<td>${name}</td>`
                const fr = new FileReader();
                fr.readAsDataURL(avatar);
                fr.onload = function(e) {
                  tr.insertAdjacentHTML('beforeend', `<td><img src="${e.target.result}" alt="" /></td>`)
                }
              });
            }
          };
        };
      };
    </script>
  </body>
</html>

